<template>
  <div class="left-menu" v-if="isShowMenu">
    <div class="title">
      <span @click="$router.push('/index')">Little Fox</span>
    </div>
    <div class="menu">
      <ul class="list">
        <li class="menu-lable">内容</li>
        <li
          :class="{ 'menu-item': true, active: item.name == activeName }"
          v-for="(item, index) in contentMenu"
          :key="index"
          @click="handlerView(item)"
        >
          <div>
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </div>
        </li>
        <li class="menu-lable">系统</li>
        <li
          :class="{ 'menu-item': true, active: item.name === activeName }"
          v-for="(item, index) in systemMenu"
          :key="index + 10"
          @click="handlerView(item)"
        >
          <div>
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftmenu",
  props: {
    contentMenu: Array,
    systemMenu: Array,
    isShowMenu: Boolean,
  },
  data() {
    return {
      activeName: this.$store.getters.getActiveMenu.name,
    };
  },
  
  methods: {
    handlerView(item) {
      this.activeName = item.name;
      localStorage.setItem("activeMenu", JSON.stringify(item));
      this.$store.dispatch('setActiveMenu',item)
      this.$router.push(`/manage${item.path}`);
    },
  },
};
</script>

<style scoped lang="scss">
.left-menu {
  width: 220px;
  background-color: #aaa;

  .title {
    width: 100%;
    height: 70px;
    background-color: #fff;
    span {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 70px;
      color: #000;
      font-weight: 600;
      background: linear-gradient(to right, #9be3f0, #1393a4, #149858);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 1.7em;
      font-weight: bold;
      cursor:pointer;
    }
  }
  .menu {
    width: 100%;
    height: calc(100% - 40px);
    background-color: #fff;
    overflow: scroll;
    .list {
      width: 100%;
      height: 100%;
      padding: 10px 0;
      box-sizing: border-box;
      li {
        width: 100%;
        line-height: 30px;
        box-sizing: border-box;
      }
      .menu-lable {
        font-size: 15px;
        color: #aaa;
      }
      .menu-item {
        padding: 5px 0 5px 20px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        span {
          margin-left: 6px;
        }
      }
      .menu-item:hover {
        background-color: #f56c6cae;

        color: #fff;
      }
      .menu-item.active {
        background-color: #f56c6c;
        color: #fff;
      }
    }
  }
  .menu::-webkit-scrollbar {
    display: none;
  }
}
.right_main {
  overflow: hidden;
}
</style>